|
这是实际效果主要功能报告
1.点击左侧导航栏和tabs栏切换页面
2.刷新页面不会导致已选的tabs栏消失
3.刷新页面不会导致当前点击的tabs栏失去点击效果
这里需要运用到vuex与vue-router以及mitt的知识点大家可以个人主页中的关于vuex使用方法简单易懂。vuex使用教程，mitt教程
第一步声明vuex中的属性 editableTabs/editableTabsValue
editableTabs：为当前选择的标签总合
editableTabsValue：为当前选中的标签
在vuex文件中创建方法：
import { createStore } from 'vuex';
import createPersistedState from "vuex-persistedstate";
const store = createStore({
state: {
// 添加您的全局状态变量
info: '',
editableTabs: [
{
title: '首页',
name: '/home_page',
content: '/home_page',
},
],
editableTabsValue: '/home_page'
},
mutations: {
// / 添加您的全局状态更新方法
updateInfo(state, payload) {
state.info = payload
},
editableTabs(state, payload) {
state.editableTabs.push({
title: payload.title,
name: payload.name,
content: payload.content
})
},
editableTabsValue(state, payload) {
state.editableTabsValue = payload
}
},
actions: {
// 添加您的异步操作和其他处理方法
// 2秒后更新状态
updateInfo(context, payload) {
context.commit('updateInfo', payload)
},
//页面导航栏方法
updateeditableTabs(context, payload) {
context.commit('editableTabs', payload)
},
updateeditableTabsValue(context, payload) {
context.commit('editableTabsValue', payload)
}
},
getters: {
// 添加您的子模块（如果有）
formatInfo(state) {
// return state.info + ' Tom'
console.log(state)
}
},
modules: {
},
plugins: [createPersistedState()]
});
export default store;
第二步导航栏触发父组件方法传参
import emitter from '../public_method/bus.js'
const addTab=(index : String, label:String)=>{
emitter.emit('addTab', { index, label });
}
@click="addTab('/Procurement_Management/Purchase_Order','采购订单'
第三部父组件引入添加tabs标签方法
let a = 0
console.log("点击导航栏时遍历tabs数组，当数组没有出去返回1")
store.state.editableTabs.forEach(tab => {
if (tab.title == data.label) {
return a = 1
}
})
console.log("当数组为一时间添加新的tabs标签，否则跳转到已经有了的tabs标签")
if (a == 0) {
//修改值方法
store.dispatch('updateeditableTabs', {
title: data.label,
name: data.index,
content: data.index
})
//标记当前点击的标签
store.dispatch('updateeditableTabsValue', data.index)
router.push(store.state.editableTabsValue)
} else {
router.push(data.index)
store.dispatch('updateeditableTabsValue', data.index)
}
添加代码块
这里判断出是否首页，首页不可以有删除按钮
删除方法@tab-remove="removeTab"代码
const removeTab = (targetName: string) => {
const tabs = store.state.editableTabs
let activeName = store.state.editableTabsValue
console.log(activeName)
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
store.dispatch('updateeditableTabsValue', activeName)
router.push(activeName)
store.state.editableTabs = tabs.filter((tab) => tab.name !== targetName)
}
选中代码@tab-click="Pageswitch"可以发生跳转
const Pageswitch = (tab: String, event: String) => {
store.dispatch('updateeditableTabsValue', tab.props.name)
router.push(tab.props.name)
}
这样三个效果就完成了我这里会将我首页复制出来大家copy就OK了
import Header from '../components/structure/Header.vue'
import Navbar from '../components/structure/Navbar.vue'
import emitter from '../components/public_method/bus'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
onMounted(() => {
})
emitter.on('addTab', (data: any) => {
let a = 0
store.state.editableTabs.forEach(tab => {
if (tab.title == data.label) {
return a = 1
}
})
if (a == 0) {
//修改值方法
store.dispatch('updateeditableTabs', {
title: data.label,
name: data.index,
content: data.index
})
store.dispatch('updateeditableTabsValue', data.index)
router.push(store.state.editableTabsValue)
} else {
router.push(data.index)
store.dispatch('updateeditableTabsValue', data.index)
}
})
const removeTab = (targetName: string) => {
const tabs = store.state.editableTabs
let activeName = store.state.editableTabsValue
console.log(activeName)
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
store.dispatch('updateeditableTabsValue', activeName)
store.state.editableTabs = tabs.filter((tab) => tab.name !== targetName)
}
const Pageswitch = (tab: String, event: String) => {
store.dispatch('updateeditableTabsValue', tab.props.name)
router.push(tab.props.name)
}
|